<style scoped>
.article-h-scroller-container {
    width: 100%;
    background-color: white;
    /*margin-bottom: 10px;*/
}

.article-h-scroller-item {
    display: inline-block;
    width: 80px;
    padding: 10px 5px;
}

.article-h-scroller-item > img {
    width: 100%;
    margin: 0 auto;
    display: block;
}

</style>

<template>
    <div class="article-h-scroller">
        <scroller lock-y :scrollbar-x="true" v-ref:scroller>
            <div class="article-h-scroller-container" :style="{width: h_width}" >
                <a v-link="{path: item.url}" class="article-h-scroller-item" v-for="item in items">
                    <img :src="item.img" />
                </a>
            </div>
        </scroller>
    </div>
</template>

<script>
    import Scroller from 'vux-components/Scroller'
    import Vue from 'vue'

    export default {
        props: ['value'],
        data: () => ({h_width: 0}),
        computed: {
            items: ({value}) => JSON.parse(value),
        },
        components: {
            Scroller
        },

        ready () {
            this.h_width = `${this.items.length * 90 + 20}px`;
            Vue.nextTick(() => {
                this.$refs.scroller.reset();
            });
        },
    }
</script>
